<template>
	<view class="container">
		<view class="search">
			<input type="text" class="input" v-model="username" maxlength="12" placeholder="请输入长度1-12位游戏名" placeholder-class="placeholder" />
			<button class="search_btn" @click="handleChangeUserName">生成</button>
		</view>
		<view>
			<view class="title"><text>生成列表</text></view>
			<view class="title" v-for="item in text">
				<text>{{ item }}</text><button class="search_btn" @click="copyName(item)">复制</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				text: [],
				opp: ['', '', '', '', '']
			}
		},
		methods: {
			handleChangeUserName() {
				if (this.username === "") {
					return;
				}
				this.text = []
				this.text = this.opp.map((item) => {
					return this.username + item
				})
				var a = this.opp.map((item) => {
					return item + this.username
				})
				var b = this.opp.map((item) => {
					return item + this.username + item
				})
				for (var i in a) {
					this.text.push(a[i]);
				}
				for (var i in b) {
					this.text.push(b[i]);
				}
			},
			copyName(text) {
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.container .search {
		width: 90%;
		margin: 0 5%;
	}

	.container .input {
		width: 70%;
		border: 1px solid #007AFF;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
		display: inline-block;
	}

	.container .search_btn {
		width: 25%;
		height: 32px;
		line-height: 32px;
		display: inline-block;
		font-size: 16px;
		background-color: #007AFF;
		border-radius: 0;
		color: white;
	}

	.title {
		font-size: 1.3em;
		margin: 1em 0 1.5em 1em;

	}

	.title button {
		float: right;
	}
</style>
